<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {

            width: 500px;
            height: 220px;
            background-color: #00a1cc;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            position: relative;
        }
        #box img {
            font-size: 0;
        }
    </style>
</head>
<body>
<div id="box">
    <div style="width: 9999px;">
        <div style="float: left">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>


</div>

<script>
    var box = document.getElementById('box');
    function maquee(box,dir){
        var findObj = box.children[0].children[0];
        var willInsertObj = box.children[0];
        willInsertObj.appendChild(findObj.cloneNode(true))

        function move(){
            var step,condition,startPosition;
            switch (dir){
                case "left":
                    step = 1;
                    condition = (box.scrollLeft >= box.scrollWidth/2);
                    startPosition = 0;
                    break;
                case "right":
                    step = -1;
                    condition = (box.scrollLeft == 0);
                    startPosition =  box.scrollWidth/2;
                    break;
            }

            if (condition){
                box.scrollLeft = startPosition;
            } else {
                box.scrollLeft =  box.scrollLeft + step;
            }

        }
        setInterval(move,5);
    }
//    maquee(box,'left');
//    maquee(box,'right');
    maquee(box,'up');



//    box.onscroll = function(){
//        //this === box
//        console.log(this.scrollLeft);
//        console.log('offsetWidth'+box.offsetWidth);
//        console.log('scrollWidth'+box.scrollWidth);
//
//    }
</script>
</body>
</html>